<template>
	<view class="edit-nickname-page">
		<!-- 内容区域 -->
		<view class="content">
			<!-- 输入区域 -->
			<view class="input-section">
				<input 
					class="nickname-input"
					v-model="nickname"
					placeholder="请输入昵称"
					maxlength="20"
					@input="onInput"
				/>
				<text class="input-hint">4-20个字符，可由中英文、数字组成</text>
			</view>
			
			<!-- 保存按钮 -->
			<view class="button-section">
				<button class="save-btn" @click="saveNickname">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: '',
				originalNickname: '小亮'
			}
		},
		onLoad(options) {
			// 接收传递的昵称数据
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('passNickname', (data) => {
				this.nickname = data.nickname;
				this.originalNickname = data.nickname;
			});
		},
		mounted() {
			// 如果没有传递数据，使用默认昵称
			if (!this.nickname) {
				this.nickname = this.originalNickname;
			}
		},
		methods: {
			// 输入处理
			onInput(e) {
				this.nickname = e.detail.value;
			},
			
			// 保存昵称
			saveNickname() {
				if (!this.nickname.trim()) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return;
				}
				
				if (this.nickname.length < 4) {
					uni.showToast({
						title: '昵称至少4个字符',
						icon: 'none'
					});
					return;
				}
				
				// 将更新的昵称存储到本地存储
				uni.setStorageSync('updatedNickname', this.nickname);
				
				// 显示保存成功提示
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
				
				// 延迟返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		}
	}
</script>

<style scoped>
.edit-nickname-page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.content {
	padding: 30rpx;
}

.input-section {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.nickname-input {
	width: 100%;
	height: 88rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 24rpx;
	font-size: 32rpx;
	background-color: #fff;
	margin-bottom: 16rpx;
	box-sizing: border-box;
}

.input-hint {
	font-size: 24rpx;
	color: #999;
	line-height: 1.4;
}

.button-section {
	padding: 0 30rpx;
}

.save-btn {
	width: 100%;
	height: 88rpx;
	background-color: #ff4757;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 8rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.save-btn:active {
	background-color: #e63946;
}
</style>
